<template>
  <div class="audit-comment">
    <search-list
      ref="commentList"
      :api-url="$url.CommentList"
      :option="searchOpt"
      :itemPerRow="8"
      @selection-change="selectionChange"
      :beforeQuery="beforeQuery"
    >
      <el-table-column type="selection"></el-table-column>

      <el-table-column prop="id" label="评论ID/用户ID" min-width="110px">
        <template slot-scope="scope">
          <span>
            <p>评论ID: {{ scope.row.id }}</p>
            <p>用户ID: {{ scope.row.uuid }}</p>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="评论内容"></el-table-column>
      <el-table-column prop="checked" label="评论状态" width="90px">
        <template slot-scope="scope">
          <span>
            {{ $selectFormat['commentCheckSl'](scope.row.checked).label }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="display" label="是否隐藏" width="70px">
        <template slot-scope="scope">
          <span>
            {{ $selectFormat['hiddenSl'](scope.row.display).label }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="faq" label="求解答" width="60px">
        <template slot-scope="scope">
          <span>
            {{ $selectFormat['faqSl'](scope.row.faq).label }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="images" label="图片">
        <template slot-scope="scope">
          <div v-if="scope.row.withImg" class="comment-image" v-viewer>
            <img :src="image" v-for="(image, index) in scope.row.images.split(',')" :key="index" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="评论数据" width="90px">
        <template slot-scope="scope">
          <div>
            <p>赞数: {{ scope.row.likeCount }}</p>
            <p>回复数: {{ scope.row.replyCount }}</p>
            <p
              class="report-cnt-btn"
              :class="{ has: scope.row.reportCnt > 0 }"
              @click="showReportDialog(scope.row)"
            >
              举报数: {{ scope.row.reportCnt }}
            </p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="主体类型">
        <template slot-scope="scope">
          <div>
            <p>主题ID: {{ scope.row.subjectId }}</p>
            <p>主题类型: {{ $selectFormat['videoTypeSl'](scope.row.subjectType).label }}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="创建时间" width="150"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="addComment(scope.row)">回复</el-button>
        </template>
      </el-table-column>
      <div slot="btn-after" class="btn-after" slot-scope="scope">
        <el-button
          type="success"
          :disabled="scope.selectedData.length === 0"
          v-permission="['audit:comment:pass']"
          icon="el-icon-checked"
          @click="pass(COMMENT_PASS)"
        >
          审核通过
        </el-button>
        <el-button
          type="danger"
          icon="el-icon-close"
          :disabled="scope.selectedData.length === 0"
          @click="pass(COMMENT_NO_PASS)"
          v-permission="['audit:comment:pass']"
        >
          审核不通过
        </el-button>
      </div>
    </search-list>

    <el-dialog width="90%" :visible.sync="reportDialogShow" v-if="reportDialogShow">
      <h2>举报信息列表</h2>
      <search-list
        ref="commentList"
        :api-url="$url.CommentReportList"
        :option="[]"
        :beforeQuery="reportDialogBeforeQuery"
      >
        <el-table-column prop="uuid" label="用户UUID"></el-table-column>
        <el-table-column prop="reason" label="原因类型"></el-table-column>
        <el-table-column prop="content" label="举报内容"></el-table-column>
        <el-table-column prop="createdAt" label="举报时间" max-width="150"></el-table-column>
      </search-list>
    </el-dialog>
    <comment-dialog
      v-if="showCommentDialog"
      :item="commentItem"
      @close="showCommentDialog = false"
      @success="replySuccess"
    ></comment-dialog>
  </div>
</template>

<script>
  import CommentDialog from '../../components/CommentDialog.vue';
  export default {
    components: { CommentDialog },
    data() {
      return {
        selectedData: [],
        isFirstQuery: true,
        searchOpt: [
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'subjectId',
            label: '评论主体ID',
          },
          {
            type: 'videoTypeSl',
            name: 'subjectType',
            label: '主题类型',
          },
          {
            type: 'faqSl',
            name: 'withImg',
            label: '是否带图',
          },
          {
            type: 'hiddenSl',
            name: 'display',
            label: '是否展示',
          },
          {
            type: 'commentCheckSl',
            name: 'checked',
            label: '审核状态',
          },
        ],
        COMMENT_PASS: 1,
        COMMENT_NO_PASS: 2,

        reportDialogShow: false,
        reportCommentId: 0,
        showCommentDialog: false,
        commentItem: {},
      };
    },
    methods: {
      selectionChange(val) {
        this.selectedData = val;
      },
      /**
       * 检测
       */
      pass(action) {
        Promise.all(
          this.selectedData.map((comment) => {
            return this.$service.CommentCheck({
              action,
              commentId: comment.id,
            });
          }),
        ).then((res) => {
          this.$message.success('审核操作成功');
          this.selectedData = [];
          this.$refs.commentList.getList();
        });
      },
      /**
       * 展示这个评论的举报
       */
      showReportDialog(row) {
        if (row.reportCnt != 0) {
          this.reportCommentId = row.id;
          this.reportDialogShow = true;
        } else {
          this.$notify({
            message: '暂时还没有举报',
            type: 'info',
          });
        }
      },
      reportDialogBeforeQuery({ searchInfo }) {
        searchInfo.commentId = this.reportCommentId;
        console.log(this.reportCommentId);
      },
      beforeQuery({ searchInfo }) {
        const { subjectId } = this.$route.params;
        if (subjectId && this.isFirstQuery) {
          searchInfo.subjectId = subjectId;
          this.isFirstQuery = false;
        }
      },
      // 添加评论
      addComment(row) {
        this.showCommentDialog = !this.showCommentDialog;
        const { content, id, subjectId, subjectType } = row;
        this.$set(this, 'commentItem', { title: content, parentId: id, subjectId, subjectType });
      },
      replySuccess() {
        this.$refs.commentList.getList();
      },
    },
  };
</script>

<style lang="less" scoped>
  .comment-image {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    img {
      width: 100px;
      height: 100px;
      margin-right: 10px;
      margin-bottom: 10px;
      cursor: pointer;
      &:hover {
        box-shadow: 0 5px 10px #888;
      }
    }
  }

  .report-cnt-btn {
    cursor: default;
    &.has {
      color: #ff2200;
      cursor: pointer;
    }

    &:hover {
      text-shadow: 0 0 3px #999;
    }
  }
</style>
